<template>
  <div class="bottom-send-box">
    <div class="send-box">
      <div class="send-input">
        <el-input
            v-model="question"
            autosize
            type="textarea"
            placeholder="请输入"
            maxlength="1000"
            @keyup.enter.native="sendMsg"
        ></el-input>
      </div>
      <div class="send-btn">
        <el-button icon="el-icon-s-promotion" circle size="medium"  @click="sendMsg"></el-button>
      </div>
    </div>
  </div>
</template>
<script>
const {sendMessage} = require('@/api/index')
  module.exports = {
    name: 'chatInput',
    data() {
      return {
        question: '',
      }
    },
    methods: {
      sendMsg() {
        if (!this.question)return
        sendMessage(this.question)
      }
    }
  }
</script>
<style scoped lang="scss">
.bottom-send-box{
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  padding: 10px;
  box-sizing: border-box;
  overflow-x:hidden;


  .send-box{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid var(--inputLineColor);
    background-color: var(--inputBgColor);
    border-radius: 10px;

    :deep(.el-textarea__inner:focus){
      border: none;
      box-shadow: none;
    }
    :deep(.el-textarea__inner:hover){
      border: none;
      box-shadow: none;
    }
    :deep(.el-textarea__inner){
      border: none;
      box-shadow: none;
      background-color: var(--inputBgColor);
      padding: 10px;
      box-sizing: border-box;
      max-height: 30vh;
    }
    .send-input{
      width: 100%;

    }
    .send-btn{
      width: 100%;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      padding: 10px 10px;
      box-sizing: border-box;

      :deep(.el-button){
        background-color: var(--themeColor);
        color: #fff;
        font-size: 18px;
      }
    }
  }
}
</style>